<template>
  <ant-modal modalWidth="1300" modalHeight="800" :visible="open" :modal-title="formTitle" :adjust-size="true"
    :maskClosable="false" @cancel="cancel">
    <a-form-model class="inventory_opening" ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      
        <biz-product v-if="showProductModal" ref="bizProduct" @ok="selectProduct" @close="showProductModal = false" />
        <a-spin :spinning="spinning">
        <a-row :gutter="32">
          <a-col :span="12">
            <a-form-model-item label="仓库" prop="warehouseId">
              <a-select placeholder="请选择仓库" v-model="form.warehouseId" style="width: 100%" allow-clear
                @change='selectWarehouse'>
                <a-select-option v-for="(d, index) in warehouseIdOptions" :key="index" :value="d.id">{{ d.warehouseName
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" prop="remark">
              <a-input v-model="form.remark" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-card :bordered="false">
              <advance-table 
                :components="drag(columns,'initStockDetail')" columnsTitle="initStockDetail" :loading="loading" rowKey="id" size="middle" :columns="columns"
                :data-source="form.detailsList" style="min-height:500px" :pagination="false" :bordered="true">
                <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                  <div class="table_title">期初明细</div>
                  <a-button type="primary" @click="handleAddProduct">
                    <a-icon type="plus" />新增
                  </a-button>
                  <a-button :loading="uploadLoading" type="" @click="importTemplate" v-hasPermi="['biz:bizInventoryOpening:import']"
                    :title="!form.warehouseId ? '请选择仓库' : ''" :disabled="!form.warehouseId || uploadLoading">
                    <span v-if="!uploadLoading"><a-icon type="import" />导入</span>
                    <span v-else>上传中...</span>
                  </a-button>
                </div>
                <span slot="unitSlot" slot-scope="{record}">
                  <a-select placeholder="请选择单位" v-model="record.unit" :getPopupContainer="triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                    " style="width: 100%" allow-clear @change='selectUnit(record)'>
                    <a-select-option v-for="(d, index) in record.unitList" :key="index" :value="d.key">{{ d.name
                    }}</a-select-option>
                  </a-select>
                </span>
                <span slot="spaceIdSlot" slot-scope="{record}">
                  <a-select show-search optionFilterProp="children" placeholder="请选择仓位" v-model="record.spaceId"
                    :getPopupContainer="triggerNode => {
                      return triggerNode.parentNode || document.body
                    }
                      " style="width: 100%" allow-clear @change='changeUnit(record)'>
                    <a-select-option v-for="(d, index) in spaceList" :key="index" :value="d.id">{{ d.postion
                    }}</a-select-option>
                  </a-select>
                </span>
                
                <span slot="rowIndexSlot" slot-scope="{record,index}">
                  {{ index + 1}}
                </span>
                <span slot="productNumberSlot" slot-scope="{record}">
                  <a-input type='text' placeholder="请输入" v-model="record.productNumber" @change='changeUnit(record)' />
                </span>
                <span slot="unitPriceSlot" slot-scope="{record}">
                  <a-input type='text' placeholder="请输入" v-model="record.unitPrice" @change='changeUnit(record)' />
                </span>
                <span slot="totalAmountSlot" slot-scope="{record}">
                  <a-input type='text' placeholder="请输入" v-model="record.totalAmount" />
                </span>
                <span slot="remarkSlot" slot-scope="{record}">
                  <a-input type='text' placeholder="请输入" v-model="record.remark" />
                </span>

                <span slot="operation" slot-scope="{text, record,index}">
                  <a @click="handleDelete(record, index)">
                    删除
                  </a>
                </span>
              </advance-table>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
        <!-- 上传文件 -->
        <import-excel title="导入期初" upload-msg="是否更新已经存在的用户数据" upload-action="/biz/bizProduct/importData" ref="importExcel"
          :warehouseId="form.warehouseId" @load="upload" @ok="importSUccess" />
      
    </a-form-model>
    <template slot="footer">
      <a-button :disabled="disabled" @click="cancel">
        取消
      </a-button>
      <a-button type="primary" :loading="disabled" :disabled="disabled" @click="submitForm(true)" v-hasPermi="['biz:bizInventoryOpening:add']">
        保存
      </a-button>
    </template>

  </ant-modal>
</template>
<script>
import BizInventoryOpeningAddForm from './BizInventoryOpeningForm'
export default {
  ...BizInventoryOpeningAddForm
}
</script>
<style lang="less" scoped>
.table-operations,
body tr.ant-table-expanded-row:hover .table-operations {
  padding-bottom: 8px;
  text-align: right;
}

.table-operations {
  margin-bottom: 16px;
}

.table-operations>button,
.table-operations .ant-input-affix-wrapper {
  margin-right: 8px;
}

.table_title {
  float: left;
  padding-left: 8px;
  font-weight: 600;
  color: #222222;
  line-height: 30px;
}
</style>
<style >
.inventory_opening .ant-modal-body .modal-content .advanced-table {
  min-height: 500px !important;
}
</style>
